<template>
  <div class="editor-box">
    <!--  顶部固定的工具栏  -->
    <div class="tools">
      <div class="tools-left">

        <n-popover trigger="click" placement="top">
          <template #trigger>
            <n-button quaternary title="发送表情" style="padding: 0 8px;">
              <svg-icon name="emote" :size="svgSize" />
            </n-button>
          </template>
          <emoji-popover @send-emoji="handleGetEmoji" />
        </n-popover>

        <n-button quaternary title="发送收藏" style="padding: 0 8px;">
          <svg-icon name="wx-collect" :size="svgSize"/>
        </n-button>

        <n-button quaternary title="发送文件" style="padding: 0 8px;">
          <svg-icon name="folder" :size="svgSize"/>
        </n-button>

        <n-button quaternary title="截图" style="padding: 0 8px;">
          <svg-icon name="screenshot" :size="svgSize" />
        </n-button>

      </div>
      <div class="tools-right">

        <n-button quaternary title="语音聊天" style="padding: 0 8px;">
          <svg-icon name="call" :size="svgSize" />
        </n-button>

        <n-button quaternary title="视频聊天" style="padding: 0 8px;">
          <svg-icon name="video" :size="svgSize" />
        </n-button>

      </div>
    </div>
    <!--  输入框待优化，enter为发送，ctrl+enter为换行  -->
    <n-input
      v-model:value="msgValue"
      ref="inputInstRef"
      placeholder=""
      type="textarea"
      @keydown="handleListenKeydown"
      style="height: calc(100% - 68px)"
    />
    <!--  发送按钮  -->
    <div class="bottom-send">
      <n-button type="success" @click="handleSendMsg" v-if="msgValue">发送(S)</n-button>
      <n-button strong secondary type="tertiary" @click="handleSendMsg" v-else>发送(S)</n-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import EmojiPopover from './emoji/index.vue'

const msgValue = ref()
const inputInstRef = ref(null);
const svgSize = 18; // 功能图标大小

// 输入框监听键盘事件，enter为发送，ctrl+enter为换行，todo:优化和微信一样的效果
const handleListenKeydown = (e) => {
  console.log('e', e)
  // ctrl+enter为换行
  if(e.ctrlKey && e.keyCode === 13) {
    msgValue.value += '\n'
  }
  if(e.keyCode === 13 && !e.ctrlKey) {
    handleSendMsg()
  }
}

// 接收到的表情包
const handleGetEmoji = (emoji) => {
  console.log('接收到的表情包', emoji)
}

// 发送消息
const handleSendMsg = () => {
  console.log('发送消息', msgValue.value)
  msgValue.value = undefined
  inputInstRef.value?.clear();
}
</script>

<style lang="scss" scoped>
.editor-box {
  position: relative;
  height: 100%;
  .tools {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    margin: 0 8px 0;
    font-size: 18px;
  }
  :deep(.n-input-wrapper),
  :deep(.n-input-focus){
    //background-color: transparent;
    border: 0 !important;
  }
}
.bottom-send {
  text-align: right;
  padding-right: 16px;
  //padding-bottom: 10px;
}
</style>
